<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>活动统计概览</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-title">活动总数</div>
                <div class="stat-value">{{ stats.totalActivities }}</div>
                <div class="stat-icon">
                  <i class="el-icon-s-grid"></i>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-title">报名总数</div>
                <div class="stat-value">{{ stats.totalEnrollments }}</div>
                <div class="stat-icon">
                  <i class="el-icon-s-custom"></i>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-title">本月活动</div>
                <div class="stat-value">{{ stats.monthlyActivities }}</div>
                <div class="stat-icon">
                  <i class="el-icon-date"></i>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-title">本月报名</div>
                <div class="stat-value">{{ stats.monthlyEnrollments }}</div>
                <div class="stat-icon">
                  <i class="el-icon-s-claim"></i>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>活动分类统计</span>
          </div>
          <div ref="categoryChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>报名趋势</span>
          </div>
          <div ref="trendChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>热门活动排行</span>
          </div>
          <el-table :data="hotActivities" style="width: 100%">
            <el-table-column prop="rank" label="排名" width="80" align="center" />
            <el-table-column prop="title" label="活动名称" />
            <el-table-column prop="category" label="活动分类" width="120" />
            <el-table-column prop="enrollments" label="报名人数" width="120" align="center" />
            <el-table-column prop="startTime" label="开始时间" width="180" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts';
import { getStatOverview, getCategoryStats, getEnrollmentTrend, getHotActivities } from "@/api/education/statistics";

export default {
  name: "Statistics",
  data() {
    return {
      // 统计数据
      stats: {
        totalActivities: 0,
        totalEnrollments: 0,
        monthlyActivities: 0,
        monthlyEnrollments: 0
      },
      // 热门活动数据
      hotActivities: [],
      // 图表实例
      categoryChart: null,
      trendChart: null,
      // 分类统计数据
      categoryData: [],
      // 趋势数据
      trendData: {
        months: [],
        activities: [],
        enrollments: []
      }
    };
  },
  mounted() {
    this.getStatOverview();
    this.getCategoryStats();
    this.getEnrollmentTrend();
    this.getHotActivities();
  },
  beforeDestroy() {
    // 销毁图表实例
    if (this.categoryChart) {
      this.categoryChart.dispose();
    }
    if (this.trendChart) {
      this.trendChart.dispose();
    }
  },
  methods: {
    // 获取统计概览数据
    getStatOverview() {
      getStatOverview().then(response => {
        this.stats = response.data;
      }).catch(() => {
        // 如果API尚未实现，使用模拟数据
        this.stats = {
          totalActivities: 125,
          totalEnrollments: 3568,
          monthlyActivities: 15,
          monthlyEnrollments: 342
        };
      });
    },
    // 获取分类统计数据
    getCategoryStats() {
      getCategoryStats().then(response => {
        this.categoryData = response.data;
        this.initCategoryChart();
      }).catch(() => {
        // 如果API尚未实现，使用模拟数据
        this.categoryData = [
          { name: '文艺活动', value: 35 },
          { name: '体育活动', value: 30 },
          { name: '学术竞赛', value: 25 },
          { name: '志愿服务', value: 20 },
          { name: '社会实践', value: 10 },
          { name: '其他', value: 5 }
        ];
        this.initCategoryChart();
      });
    },
    // 获取报名趋势数据
    getEnrollmentTrend() {
      getEnrollmentTrend().then(response => {
        this.trendData = response.data;
        this.initTrendChart();
      }).catch(() => {
        // 如果API尚未实现，使用模拟数据
        this.trendData = {
          months: ['1月', '2月', '3月', '4月', '5月', '6月'],
          activities: [10, 8, 15, 20, 18, 15],
          enrollments: [320, 250, 450, 580, 520, 342]
        };
        this.initTrendChart();
      });
    },
    // 获取热门活动排行
    getHotActivities() {
      getHotActivities().then(response => {
        this.hotActivities = response.rows;
      }).catch(() => {
        // 如果API尚未实现，使用模拟数据
        this.hotActivities = [
          { rank: 1, title: "校园歌手大赛", category: "文艺活动", enrollments: 256, startTime: "2023-06-15 18:30:00" },
          { rank: 2, title: "创新创业大赛", category: "学术竞赛", enrollments: 189, startTime: "2023-06-20 09:00:00" },
          { rank: 3, title: "志愿者服务日", category: "志愿服务", enrollments: 175, startTime: "2023-06-10 08:30:00" },
          { rank: 4, title: "篮球联赛", category: "体育活动", enrollments: 168, startTime: "2023-06-05 14:00:00" },
          { rank: 5, title: "英语演讲比赛", category: "学术竞赛", enrollments: 142, startTime: "2023-06-25 13:30:00" }
        ];
      });
    },
    // 初始化活动分类统计图表
    initCategoryChart() {
      this.categoryChart = echarts.init(this.$refs.categoryChart);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: this.categoryData.map(item => item.name)
        },
        series: [
          {
            name: '活动分类',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.categoryData
          }
        ]
      };
      this.categoryChart.setOption(option);
    },
    // 初始化报名趋势图表
    initTrendChart() {
      this.trendChart = echarts.init(this.$refs.trendChart);
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['活动数', '报名人数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.trendData.months
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '活动数',
            type: 'line',
            data: this.trendData.activities
          },
          {
            name: '报名人数',
            type: 'line',
            data: this.trendData.enrollments
          }
        ]
      };
      this.trendChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.stat-card {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  height: 120px;
}
.stat-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 10px;
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}
.stat-icon {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 48px;
  color: rgba(0, 0, 0, 0.1);
}
</style> 